import s from '../UITools.module.less'
import {
  FlexAlign,
  FlexBoxDirection,
  uiEditorModel
} from '@renderer/UIEditor/model/ui-editor-model'
import { SelectionTags } from '../SelectionTag'
import { ToolButton } from '../ToolButton'

export function BoxTools(props: { boxId: string }) {
  const { useOneBox } = uiEditorModel.useState
  const box = useOneBox(props.boxId)

  if (!box) return null

  return (
    <>
      <div className={s.uiToolsInfoLine}>
        <span className={s.uiToolsInfoLineLabel}>ID:</span>
        {box.id}
      </div>
      <div className={s.uiToolsInfoLine}>
        <span className={s.uiToolsInfoLineLabel}>Direction:</span>
        <SelectionTags
          onSelect={(v) => uiEditorModel.setBoxDirection(box.id, v)}
          selectedId={box.direction}
          selection={[FlexBoxDirection.horizontal, FlexBoxDirection.vertical]}
          getLabel={(v) => FlexBoxDirection[v]}
        />
      </div>
      <div className={s.uiToolsInfoLine}>
        <span className={s.uiToolsInfoLineLabel}>Content:</span>
        <SelectionTags
          selectedId={box.contentAlign}
          selection={[FlexAlign.start, FlexAlign.center, FlexAlign.end]}
          getLabel={(v) => FlexAlign[v]}
          onSelect={(v) => {
            uiEditorModel.setBoxContentAlign(box.id, v)
          }}
        />
      </div>
      <div className={s.uiToolsDivider} />
      <div className={s.uiToolsButtonGroup}>
        <ToolButton
          onEmit={() => uiEditorModel.createText(props.boxId)}
          label="Text(T)"
          shortCut="ctrl.T"
        />
        <ToolButton
          onEmit={() => uiEditorModel.createSpace(props.boxId, 100)}
          label="Space(S)"
          shortCut="ctrl.S"
        />
        <ToolButton
          onEmit={() => uiEditorModel.createBox(props.boxId)}
          label="Box(B)"
          shortCut="ctrl.B"
        />
      </div>
    </>
  )
}
